<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            display: flex;
            padding-top: 1.333333rem;
        }
        .nav{
            width: 2.133333rem;
            background-color: #eaeaea;

        }
        .nav span{
            text-align: center;
            display: block;
            height: 1.333333rem;
            line-height: 1.333333rem;
            border-bottom: .026667rem solid #ccc;
            font-size: .4rem;
        }
        .content{
            width: calc(100% - 2.133333rem);
        }
        .content .item{
            display: flex;
        }
        .content .item .img img{
            width: 2.133333rem;
            height: 2.133333rem;
        }
        .content .item .con{
            width: calc(100% - 2.133333rem);
            padding-left: .533333rem;
        }
        .content .item .con h3{
            line-height: .8rem;
            font-size: .4rem;
        }
        .content .item .con .msg{
            line-height: .8rem;
            font-size: .32rem;
        }
        .content .item .con .bas{
            display: flex;
            justify-content: space-around;
            line-height: .8rem;
            font-size: .32rem;
        }
        .content .item .con .bas .but p{
            width: 1.333333rem;
            text-align: center;
        }
        .b{
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            background-color: rgba(0, 0, 0, 0.5);
            width: 100%;
            height: 100vh;
        }
        .aler{
            display: none;
            position: absolute;
            left: calc(50% - 40%);
            top: calc(50vh - 40vh);
            width: 80%;
            height: 80vh;
            background-color: #fff;
            padding: 0 .266667rem;
        }
        .aler .imgs{
            margin:  0 auto;
            width: 2.666667rem;
            height: 2.666667rem;
        }
        .aler .imgs img{
            width: 2.666667rem;
            height: 2.666667rem;
        }
        .aler .title{
            font-size: .4rem;
        }
        .aler .msg{
            font-size: .32rem;
        }
        .aler p{
            margin: .266667rem 0;
            font-size: .48rem;
        }
        .footer{
            margin-top:1.333333rem;
        }
        .xuan{
            background-color: rosybrown;
            width: 50%;
            margin: 0 auto;
            height: .8rem;
            line-height: .8rem;
            color: white;
            text-align: center;
            border-radius:.533333rem;
        }
        .clear div span{
            display: inline-block;
            width: 1.333333rem;
            height: .8rem;
            background-color: #ccc;
            color: #000;
            line-height: .8rem;
            text-align: center;
            margin: 0 .133333rem;
        }
        .clear div span.active{
            background-color: #E4005F;
            color: #fff;
        }
        .clickChe{
            width: 2.666667rem;
            height: .8rem;
            background-color: fuchsia;
            text-align: center;
            line-height: .8rem;
            margin: .8rem auto 0;
        }
        .cheYe{
            display: none;
            position: absolute;
            z-index: 999;
            left: 0;
            bottom: 0;
            width: 100%;
            padding-bottom: 2.666667rem;
            background-color: #fff;
        }
        .cheYe .title{
            display: flex;
            justify-content: space-between;
            padding: 0 .266667rem;
            height: .8rem;
            line-height: .8rem;
        }
        .cheYe .cont{
            width: 90%;
            margin: 0 auto;
            margin: .266667rem 0;
            display: flex;
            justify-content: space-between;

        }
        .cheYe .cont .num{
            display: flex;
        }
        .cheYe .cont .num p{
            width: .533333rem;
            height: .533333rem;
            line-height: .533333rem;
            font-size: .533333rem;
            text-align: center;
        }
        .cheYe .cont .num .all,.cheYe .cont .num .ad{
            background-color: gold;
            border-radius: 50%;
        
        }
        .jie{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #F2F2F4;
            display: flex;
            justify-content: space-between;
            height: 1.066667rem;
            line-height: 1.066667rem;
            font-size: .666667rem;
            padding-left: .8rem;
            box-sizing: border-box;
        }
        .jie .suan{
            background-color: hotpink;
            color: #fff;
            width: 2.666667rem;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="nav">
        </div>
        <div class="content">
        </div>
    </div>
    <div class="clickChe">购物车</div>
    
    <div class="cheYe">
        <div class="title">
            <h3>已选中的商品</h3>
            <span>清空购物车</span>
        </div>
        <div class="lis">
            <div class="cont">
                <div class="name">
                    外婆烧仙草
                </div>
                <div class="num">
                    <p class="all">-</p>
                    <p class="n">1</p>
                    <p class="ad">+</p>
                </div>
            </div>
        </div>
        <div class="jie">
            <p>￥<span class="jia">7.00</span></p>
            <p class="suan">去结算</p>
        </div>
    </div>
    <div class="b"></div>
    <div class="aler">
    </div>
</body>
</html>
<script src="./js/flexible.js"></script>
<script src="./js/data.js"></script>
<script>

    function $(a){return document.querySelector(a)}
    function gets(a){return [...document.querySelectorAll(a)]}

    class Fn{

        constructor(data){
            this.data = data;
            this.randerNav()
            this.randerText(0)
            this.raderClick()
            this.click()
            this.id = 0;
            this.newArr = [];
            this.num = 0;
        }

        randerNav(){

            let nav = this.data.map((item,i) =>{
                return `<span index="${i}">${item.title}</span>`
            }).join('')
            $('.nav').innerHTML = nav;
        }
        randerText(index){
            let text = this.data[index].list.map((item,i) =>{
                return `<div class="item">
                <div class="img">
                    <img src="${item.img}" alt="">
                </div>
                <div class="con">
                    <h3>${item.name}</h3>
                    <p class="msg">${item.msg}</p>
                    <div class="bas">
                        <div>
                            ￥<span class="price">${item.price}</span>起
                        </div>
                        <div class="but">
                            <p class="${item.xuan === true ? 'add':"alert"}" index="${i}">${item.xuan === true ? '+':"选规格"}</p>
                        </div>
                    </div>
                </div>
            </div>`
            }).join('')
            $('.content').innerHTML = text;
        }
        raderClick(){
            let that = this;
            $('.nav').onclick=function(e){
                that.randerText(e.target.getAttribute('index'))
                that.id = e.target.getAttribute('index');
            }
        }
        click(){
            let that = this;
            $('.content').onclick=function(e){
                let src = e.target;
                if(src.className === 'add'){
                    that.newArr.push(that.data[that.id].list[src.getAttribute('index')])
                    $('.b').style.display ='block'
                    $('.cheYe').style.display ='block'
                    that.che()
                }else if(src.className === 'alert'){
                    $('.b').style.display ='block'
                    $('.aler').style.display ='block'
                    that.alert(that.data[that.id].list[src.getAttribute('index')])
                }
            }
            $('.clickChe').onclick=function(){
                $('.b').style.display ='block'
                    $('.cheYe').style.display ='block'
                    that.che()
            }
        }
        alert(data){
            let that = this;
                $('.aler').innerHTML = `<div class="imgs">
                <img src="${data.img}" alt="">
            </div>
            <p class="title">${data.name}</p>
            <p class="msg">${data.msg}</p>
            <div class="clear">

            </div>
            <div class="footer">
                已选：<span class="bei">中杯</span>
                <span class="wen">正常冰</span>
                <span class="tang">正常唐</span>
            </div>
            <div class="buttom">
                <p>￥${data.price}</p>
                <div class="xuan">
                    选好了
                </div>
            </div>  `
            let obj = {
                '杯型':['中杯','大杯'],
                '温度':['正常冰','少冰','热'],
                '糖度':['正常唐','少唐'],
            }

            var str = '<div>';
            for(let key  in obj){
                    str += `<p class="xing">${key}</p><div>`
                    for(var c =0;c<obj[key].length;c++){
                        if(c === 0){
                            str += `<span class="active">${obj[key][c]}</span>`
                        }else{
                            str += `<span>${obj[key][c]}</span>`
                        }
                        
                    }   
                    str += `</div>`
            }
            str += `</div>`
            $('.clear').innerHTML = str;
            $('.clear').onclick=function(e){
                let src = e.target
                if(src.nodeName === 'SPAN'){
                    console.log(src);
                    let sps = src.parentNode.querySelectorAll('span')
                    for(let u = 0;u<sps.length;u++){
                        sps[u].classList.remove('active')
                    }
                src.classList.add('active')
                }
            }
            $('.xuan').onclick=function(){
                that.newArr.push(data)
                $('.b').style.display ='none'
                $('.aler').style.display ='none'
            }
            $('.b').onclick=function(){
                $('.b').style.display ='none'
                $('.aler').style.display ='none'
                $('.cheYe').style.display ='none'
            }
            
        }
        che(){
            let that = this;
            let str = this.newArr.map((item,i) =>{
                that.num += item.price;
                return `<div class="cont">
                <div class="name">
                   ${item.name}
                </div>
                <div>
                    小计：<span class="xiaoji">${item.price}</span>    
                </div>
                <div class="num">
                    <p class="all">-</p>
                    <p class="n">1</p>
                    <p class="ad">+</p>
                </div>
            </div>`
            }).join('')
            $('.lis').innerHTML = str;

            $('.jia').innerHTML = this.num;
            this.cheClick()
        }
        cheClick(){
            let that = this;
            $('.lis').onclick=function(e){
                if(e.target.className === 'all'){
                    e.target.parentNode.querySelector('.n').innerHTML--
                    if(e.target.parentNode.querySelector('.n').innerHTML <= 1){
                        e.target.parentNode.querySelector('.n').innerHTML = 1;
                    }else{
                        that.num -= 7;
                    }
                }else if(e.target.className === 'ad'){
                    that.num += 7;
                    e.target.parentNode.querySelector('.n').innerHTML++
                }
                $('.jia').innerHTML = that.num;
            }
        }
    }


    new Fn(data)
</script>